<template>
  <right-canvas-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-mc">
      <dropdown-normal v-model="commonAttr.itemType" :valLists="CANVAS_MC_TYPES" label="列表组件类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
      <template v-if="commonAttr.itemType == CANVAS_MC_TYPES_MAP.custom" >
        <dropdown-normal v-model="commonAttr.customClassName" :valLists="CANVAS_MC_CLASSNAME_TYPES" label="列表组件类型" :bIsBtn="false" @change="onChangeAttr" ></dropdown-normal>
      </template>
      <template v-else>
        <input-normal label="加载jsUrl" v-model="commonAttr.loadJsUrl" @change="onChangeAttr"></input-normal>
      </template>
      <input-normal label="动画前默认图片" v-model="commonAttr.defaultPicUrl" @change="onChangeAttr"></input-normal>
      <textarea-normal label="最新自定义参数" v-model="commonAttr.injectJsClassParams" placeholder='{"operate":"2000"}' @change="onChangeAttr"></textarea-normal>
      <textarea-normal v-if="commonAttr.params" label="以前自定义参数" v-model="commonAttr.params" placeholder='{"operate":"2000"}'></textarea-normal>
      <switch-normal v-model="commonAttr.isCreatejs" label="加载js" @change="onChangeAttr"></switch-normal>
    </el-form>
  </right-canvas-template>
</template>


<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { CANVAS_MC_TYPES_MAP, CANVAS_MC_TYPES, CANVAS_MC_CLASSNAME_TYPES } from '@/const/'

const useWebComponent = useWebComponentStore()

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
</script>